<template>
	<view>
		<map id="map" class="map-box" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
		<view class="po_fiexd">
			<view class="line-absolute flex justify-center">
				<view class="line"></view>
			</view>
			<view class="padding_l_r40 mar_bottom10 flex justify-between align-center">
				<view @tap="jumpPreviousPage" class="flex align-center">
					<image class="width_32 height_32" src="/static/image/icon/arrow_l.png" mode=""></image>
					<text class="fontS24 color_fff margin_l_r15">回到笔记</text>
				</view>
				<view v-if="scenicSpot" class="flex align-center">
					<template v-if="scenicSpot.weather.indexOf('多云') != -1">
						<image class="width_40 height_40" src="/static/image/icon/cloudy.png" mode="">
						</image>
					</template>
					<template v-if="scenicSpot.weather.indexOf('晴') != -1">
						<image class="width_40 height_40" src="/static/image/icon/clear.png" mode="">
						</image>
					</template>
					<template v-if="scenicSpot.weather.indexOf('阴') != -1">
						<image class="width_40 height_40" src="/static/image/icon/yin.png" mode="">
						</image>
					</template>
					<template
						v-if="scenicSpot.weather.indexOf('小雨') != -1 || scenicSpot.weather.indexOf('中雨') != -1 || scenicSpot.weather.indexOf('大雨') != -1|| scenicSpot.weather.indexOf('暴雨') != -1">
						<image class="width_40 height_40" src="/static/image/icon/rain.png" mode="">
						</image>
					</template>
					<template v-if="scenicSpot.weather.indexOf('阵雨') != -1">
						<image class="width_40 height_40" src="/static/image/icon/thundershower.png" mode="">
						</image>
					</template>
					<template v-if="scenicSpot.weather.indexOf('雪') != -1">
						<image class="width_40 height_40" src="/static/image/icon/snow.png" mode="">
						</image>
					</template>
					<text class="fontS24 color_fff mar_left15">{{scenicSpot.weather}}
						{{scenicSpot.temperature}}˚C</text>
				</view>
			</view>
			<scroll-view scroll-y :style="{height: scrollHeight}">
				<view class="fine-box">
					<view class="p_relative mar_top20">
						<u-swiper :list="scenicSpot.photos" @change="e => current = e.current" height="468rpx" keyName="url" autoplay>
							<template #indicator>
								<view class="indicator">
									<view class="indicator__dot" v-for="(item, index) in scenicSpot.photos" :key="index"
										:class="[index === current && 'indicator__dot--active']">
									</view>
								</view>
							</template>
						</u-swiper>
						<view class="describe padding_l_r20 flex justify-between align-center">
							<view class="color_fff text-left">
								<view class="fontS28 bold">{{scenicSpot.gpt_source_name}}</view>
								<text class="fontS20">{{scenicSpot.gpt_source_name}}</text>
							</view>
							<view class="score-num">{{scenicSpot.rating}}</view>
						</view>
					</view>
					<view class="bg_color_F8F8F8">
						<view class="padding_l_r20 bg_color_fff">
							<view class="mar_top30 fontS40 bold">{{scenicSpot.official_source_name}}</view>
							<view class="flex align-center mar_top20">
								<view class="flex align-center">
									<u-rate v-model="scenicSpot.rating" allowHalf readonly></u-rate>
									<text class="mar_left10 fontS32 color_FF583A">{{scenicSpot.rating}}</text>
								</view>
								<view v-if="scenicSpot.cost == 0" class="fontS28 color_222222 mar_left60">人均消费不详</view>
								<view v-else class="fontS28 color_222222 mar_left60">¥{{scenicSpot.cost}}/人</view>
							</view>
							<view class="line-partition mar_top20 mar_bottom20"></view>
							<view class="flex align-center color_222222">
								<!-- <view class="fontS28">营业中：11:00 - 次日02:00</view>
								<view class="fontS28 mar_left30">周一至周日</view> -->
								<view class="fontS28">营业中：{{scenicSpot.opentime_week}}</view>
							</view>
							<view class="line-partition mar_top20 mar_bottom20"></view>

							<view class="flex justify-between align-center">
								<view class="add-font">
									<view class="color_222222 fontS28">{{scenicSpot.address}}</view>
									<!-- <text class="color_6D6D6D fontS26">距地铁3号线春熙路站E2口步行280m</text> -->
								</view>

								<view @tap="onDial" class="text-center">
									<image class="width_40 height_40" src="/static/image/icon/phone.png" mode="">
									</image>
									<view class="color_6D6D6D fontS20">电话</view>
								</view>
							</view>
						</view>
						<view class="feature mar_top20 bg_color_fff">
							<view class="fontS32 color_222222 bold">特色内容</view>
							<view class="fontS28 color_222222 mar_top10">
								{{scenicSpot.tag}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';

	import {
		onLoad,
		onShow,
		onShareAppMessage
	} from '@dcloudio/uni-app';

	const score = ref(3.4)
	const current = ref(0)
	// 景点详细
	const scenicSpot = ref('');
	// 计划id
	const planUuid = ref('');
	// type
	const type = ref('');
	const list3 = ref([
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		'https://cdn.uviewui.com/uview/swiper/swiper3.png',
		'https://cdn.uviewui.com/uview/swiper/swiper2.png',
	])

	const latitude = ref(30.67)
	const longitude = ref(104.06)

	// 设置scroll的高度
	const scrollHeight = ref('auto');
	const fit = ref('');
	const setScrollHeight = (descHeight = 0) => {
		uni.getSystemInfo({
			success: (res) => {
				if (res.model.indexOf('iPhone X') != -1 || res.model.indexOf("iPhone XR") != -1 || res
					.model.indexOf("iPhone XS Max") != -1) {
					fit.value = '244px'
				} else {
					fit.value = '200px'
				}
				scrollHeight.value = `calc(${res.screenHeight}px - ${fit.value} - ${descHeight}px)`
			}
		})
	}

	const jumpPreviousPage = () => {
		// if (type.value == 'note') {
		// 	uni.redirectTo({
		// 		url: `/tourism-schedule-pages/tourism-schedule/tourism-schedule?planUuid=${planUuid.value}`
		// 	})
		// } else if (type.value == 'detail') {
		// 	uni.redirectTo({
		// 		url: `/pages/index/details?id=${planUuid.value}`
		// 	})
		// }
		uni.navigateBack();
	}

	const onDial = () => {
		uni.makePhoneCall({
			phoneNumber: scenicSpot.value.tel
		});
	}

	onShow(() => {
		setScrollHeight()
	})

	onLoad((e) => {
		scenicSpot.value = JSON.parse(e.info);
		planUuid.value = e.planUuid;
		type.value = e.type;
	})
</script>

<style lang="scss" scoped>
	:deep(.u-swiper) {
		background-color: transparent !important;
	}

	.map-box {
		width: 100%;
		height: calc(100vh - 88px - var(--status-bar-height));
		overflow: hidden;
	}

	.po_fiexd {
		position: fixed;
		bottom: 0;
		// bottom: var(--status-bar-height);
		width: 100%;
		backdrop-filter: blur(6rpx);

		.line-absolute {
			position: absolute;
			top: -100rpx;
			left: 50%;
			transform: translate(-50%);
		}

		.line {
			margin-top: 30rpx;
			width: 160rpx;
			height: 8rpx;
			opacity: 0.6;
			background-color: #FFFFFF;
		}
	}

	.po_fiexd::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: -100rpx;
		z-index: -1;
		height: 200rpx;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 50% 50% 0 0;
		backdrop-filter: blur(6rpx);
	}

	:deep(.u-swiper__indicator) {
		bottom: 10rpx !important;
	}

	:deep(.u-swiper__wrapper__item__wrapper__image) {
		border-radius: 32rpx 32rpx 16rpx 16rpx !important;
	}

	.describe {
		width: calc(100% - 40rpx);
		position: absolute;
		bottom: 20rpx;

		.score-num {
			font-size: 56rpx;
			font-weight: bold;
			color: #FF583A;
		}
	}

	.line-partition {
		height: 2rpx;
		opacity: 0.1;
		background: #6D6D6D;
	}

	.add-font {
		width: 516rpx;
	}

	.scroll-box {
		height: 875rpx;

		.scroll-height {
			height: inherit;
			overflow: auto hidden;
		}
	}

	.fine-box {
		height: inherit;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0 0;
	}

	.indicator {
		@include flex(row);
		justify-content: center;
		overflow: hidden;

		&__dot {
			width: 130rpx;
			height: 5rpx;
			border-radius: 2rpx;
			background-color: rgba(255, 255, 255, 0.2);
			margin: 0 8rpx;
			transition: background-color 0.3s;

			&--active {
				background-color: rgba(255, 255, 255, 0.56);
			}
		}
	}

	.feature {
		padding: 20rpx;
	}
</style>